@mixin badge-variant($bg) {
    @if color-yiq($bg) == white {
        color: lighten($bg, 50%);
        background-color: $bg;
    } @else {
        color: darken($bg, 50%);
        background-color: lighten($bg, 10%);
    }

    @at-root a#{&} {
        @include hover-focus() {
            color: color-yiq($bg);
            background-color: darken($bg, 15%);
        }

        &:focus,
        &.focus {
            outline: 0;
            box-shadow: 0 0 0 $badge-focus-width rgba($bg, 0.5);
        }
    }
}
